<!-- 用户信息描述列表 -->
<template>
  <div>
    <a-descriptions
      title="用户基本信息"
      bordered
      :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
    >
      <a-descriptions-item
        label="头像"
        :span="1"
        :style="{ textAlign: 'center' }"
      >
        <a-upload
          name="file"
          :headers="headers"
          :disabled="isOpen"
          :showUploadList="false"
          :customRequest="uploadAvatar"
        >
          <a-avatar
            style="cursor: pointer;text-align:center;position:relatvie; left:90%;"
            shape="square"
            size="large"
            :src="haveAvatar ? userInfo.avatar : ''"
            :style="{
              backgroundColor: haveAvatar ? 'white' : 'green',
              verticalAlign: 'middle',
            }"
          >
            <span style="cursor: pointer">{{ userInfo.name }}</span>
          </a-avatar>
        </a-upload>
      </a-descriptions-item>
      <a-descriptions-item label="用户名">
        {{ userInfo.name }}
      </a-descriptions-item>
      <a-descriptions-item label="联系方式">
        {{ userInfo.concat }}
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getInfo, getUserInfo } from "@/apis/user";
import { uploadAvatar } from "@/apis/common";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      username: "",
      concat: "",
      haveAvatar: false,
      userInfo: {},
      visible: false,
      confirmLoading: false,
      isOpen: false,
    };
  },
  // 监听属性 类似于data概念
  computed: {
    headers() {
      let data = {
        token: this.$store.getters.token,
      };
      return data;
    }
  },
  //监控data中的数据变化
  watch: {
    $route: {
      handler() {
        this.getInfo();
        this.$emit("open", this.isOpen);
      },
    },
  },
  //方法集合
  methods: {
    uploadAvatar(data) {
      if (data.file.size > 5 * 1024 * 1024) {
        this.$message.warning("文件不能大于5MB");
        return;
      }
      var that = this;
      let formData = new FormData();
      formData.append("file", data.file);
      uploadAvatar(formData).then((res) => {
        that.$set(this.userInfo, "avatar", res.data);
      });
    },
    getInfo() {
      getUserInfo(this.$route.params.id).then((res) => {
        let data = {
          id: res.data.id,
          avatar: res.data.avatar,
          name: res.data.name,
          concat: res.data.concat,
        };
        if (data.avatar !== null) this.haveAvatar = true;
        this.userInfo = data;
        if (this.$store.getters.id) {
          this.isOpen = !(parseInt(this.$route.params.id) === parseInt(this.$store.getters.id));
          return;
        }
        this.isOpen = true;
      });
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getInfo();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.ant-descriptions-item-content {
  text-align: center imp !important;
}
</style>
